<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sensor Monitor</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        accent: '#722ED1',
                        success: '#52C41A',
                        warning: '#FAAD14',
                        danger: '#FF4D4F',
                        dark: '#1F2329',
                        light: '#F2F3F5',
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 引入Google字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- 核心功能脚本 -->
    <script>
        // 全局变量
        let refreshInterval = null;
        let isAutoRefresh = false;

        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function () {
            // 初始化自动刷新状态
            updateAutoRefreshStatus();
        });

        // 刷新传感器数据
        function fun() {
            const v = document.getElementsByName("user1");
            const loadingIcons = document.querySelectorAll('.loading-icon');
            const x = new XMLHttpRequest();
            x.open("post", "", true);
            x.send("check");

            x.onreadystatechange = function () {
                if (x.readyState === 4 && x.status === 200) {
                    const r = x.responseText;
                    const s = r.split(" ");

                    // 更新传感器数据
                    v[0].value = s[0];
                    v[1].value = s[1];
                    v[2].value = s[2];
                    v[3].value = s[3];

                    // 添加数值变化动画
                    const sensorValues = document.querySelectorAll('.sensor-value');
                    sensorValues.forEach(value => {
                        value.classList.add('text-primary');
                        setTimeout(() => {
                            value.classList.remove('text-primary');
                        }, 500);
                    });
                } else {
                    // 显示错误信息
                    alert("获取数据失败，请重试");
                }
            }
        }

        // 控制LED状态
        function set1(p) {
            const x = new XMLHttpRequest();
            x.open("post", "", true);

            if (p == 'LED开')
                x.send("which=0sta=1");
            else
                x.send("which=0sta=0");
        }

        // 控制蜂鸣器状态
        function set2(p) {
            const x = new XMLHttpRequest();
            x.open("post", "", true);

            if (p == 'weng开')
                x.send("which=1sta=1");
            else
                x.send("which=1sta=0");
        }

        // 切换自动刷新状态
        function toggleAutoRefresh() {
            isAutoRefresh = !isAutoRefresh;
            updateAutoRefreshStatus();

            const autoRefreshBtn = document.getElementById('auto-refresh-btn');
            autoRefreshBtn.classList.add('scale-95');
            setTimeout(() => {
                autoRefreshBtn.classList.remove('scale-95');
            }, 200);
        }

        // 更新自动刷新状态
        function updateAutoRefreshStatus() {
            const autoRefreshBtn = document.getElementById('auto-refresh-btn');
            const refreshIcon = document.getElementById('refresh-icon');

            if (isAutoRefresh) {
                autoRefreshBtn.classList.remove('bg-gray-200', 'text-gray-700');
                autoRefreshBtn.classList.add('bg-success', 'text-white');
                refreshIcon.classList.add('animate-spin');

                // 设置自动刷新间隔
                if (refreshInterval) clearInterval(refreshInterval);
                refreshInterval = setInterval(fun, 1000);
            } else {
                autoRefreshBtn.classList.remove('bg-success', 'text-white');
                autoRefreshBtn.classList.add('bg-gray-200', 'text-gray-700');
                refreshIcon.classList.remove('animate-spin');

                // 清除自动刷新间隔
                if (refreshInterval) clearInterval(refreshInterval);
                refreshInterval = null;
            }
        }
    </script>
</head>

<body class="bg-gray-50 font-inter text-dark min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <i class="fa fa-microchip text-primary text-2xl"></i>
                <h1 class="text-xl font-bold text-primary">传感器监控系统</h1>
            </div>
            <div class="flex items-center space-x-3">
                <button id="auto-refresh-btn" onclick="toggleAutoRefresh()"
                    class="bg-gray-200 text-gray-700 px-3 py-1.5 rounded-md flex items-center space-x-2 refresh-btn">
                    <i id="refresh-icon" class="fa fa-refresh"></i>
                    <span>自动刷新</span>
                </button>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="flex-grow container mx-auto px-4 py-6">
        <!-- 传感器数据卡片 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <!-- 光照传感器 -->
            <div class="bg-white rounded-xl p-5 sensor-card card-shadow">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center space-x-2">
                        <div class="w-2 h-2 bg-primary rounded-full"></div>
                        <h2 class="font-semibold text-gray-700">光照传感器</h2>
                    </div>
                    <div class="loading-icon hidden text-primary">
                        <i class="fa fa-circle-o-notch fa-spin"></i>
                    </div>
                </div>
                <div class="flex items-end justify-between">
                    <div>
                        <div class="text-xs text-gray-500 mb-1">当前值</div>
                        <div class="sensor-value">
                            <input type="text" name="user1"
                                class="w-full bg-transparent border-none outline-none text-primary">
                        </div>
                    </div>
                    <div class="text-4xl text-gray-200">
                        <i class="fa fa-sun-o"></i>
                    </div>
                </div>
            </div>

            <!-- 加速度X传感器 -->
            <div class="bg-white rounded-xl p-5 sensor-card card-shadow">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center space-x-2">
                        <div class="w-2 h-2 bg-secondary rounded-full"></div>
                        <h2 class="font-semibold text-gray-700">加速度X</h2>
                    </div>
                    <div class="loading-icon hidden text-secondary">
                        <i class="fa fa-circle-o-notch fa-spin"></i>
                    </div>
                </div>
                <div class="flex items-end justify-between">
                    <div>
                        <div class="text-xs text-gray-500 mb-1">当前值</div>
                        <div class="sensor-value">
                            <input type="text" name="user1"
                                class="w-full bg-transparent border-none outline-none text-secondary">
                        </div>
                    </div>
                    <div class="text-4xl text-gray-200">
                        <i class="fa fa-arrows-h"></i>
                    </div>
                </div>
            </div>

            <!-- 加速度Y传感器 -->
            <div class="bg-white rounded-xl p-5 sensor-card card-shadow">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center space-x-2">
                        <div class="w-2 h-2 bg-accent rounded-full"></div>
                        <h2 class="font-semibold text-gray-700">加速度Y</h2>
                    </div>
                    <div class="loading-icon hidden text-accent">
                        <i class="fa fa-circle-o-notch fa-spin"></i>
                    </div>
                </div>
                <div class="flex items-end justify-between">
                    <div>
                        <div class="text-xs text-gray-500 mb-1">当前值</div>
                        <div class="sensor-value">
                            <input type="text" name="user1"
                                class="w-full bg-transparent border-none outline-none text-accent">
                        </div>
                    </div>
                    <div class="text-4xl text-gray-200">
                        <i class="fa fa-arrows-v"></i>
                    </div>
                </div>
            </div>

            <!-- 加速度Z传感器 -->
            <div class="bg-white rounded-xl p-5 sensor-card card-shadow">
                <div class="flex items-center justify-between mb-3">
                    <div class="flex items-center space-x-2">
                        <div class="w-2 h-2 bg-warning rounded-full"></div>
                        <h2 class="font-semibold text-gray-700">加速度Z</h2>
                    </div>
                    <div class="loading-icon hidden text-warning">
                        <i class="fa fa-circle-o-notch fa-spin"></i>
                    </div>
                </div>
                <div class="flex items-end justify-between">
                    <div>
                        <div class="text-xs text-gray-500 mb-1">当前值</div>
                        <div class="sensor-value">
                            <input type="text" name="user1"
                                class="w-full bg-transparent border-none outline-none text-warning">
                        </div>
                    </div>
                    <div class="text-4xl text-gray-200">
                        <i class="fa fa-arrows"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 控制面板 -->
        <div class="bg-white rounded-xl p-6 card-shadow">
            <h2 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
                <i class="fa fa-sliders text-primary mr-2"></i>控制面板
            </h2>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- LED控制 -->
                <div class="bg-gray-50 rounded-lg p-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3">
                            <i class="fa fa-lightbulb-o text-gray-500"></i>
                        </div>
                        <div>
                            <h3 class="font-medium">LED控制</h3>
                            <p class="text-sm text-gray-500">控制LED灯的开关状态</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-3">
                        <label class="switch" id="led-toggle">
                            <input type="radio" name="set1" id="LED开" value="1" onclick="set1(id)">
                            <span class="slider"></span>
                        </label>
                        <label class="switch">
                            <input type="radio" name="set1" id="LED关" value="0" onclick="set1(id)">
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>

                <!-- 蜂鸣器控制 -->
                <div class="bg-gray-50 rounded-lg p-4 flex items-center justify-between">
                    <div class="flex items-center">
                        <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center mr-3">
                            <i class="fa fa-volume-up text-gray-500"></i>
                        </div>
                        <div>
                            <h3 class="font-medium">蜂鸣器控制</h3>
                            <p class="text-sm text-gray-500">控制蜂鸣器的开关状态</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-3">
                        <label class="switch" id="weng-toggle">
                            <input type="radio" name="set2" id="weng开" value="1" onclick="set2(id)">
                            <span class="slider"></span>
                        </label>
                        <label class="switch">
                            <input type="radio" name="set2" id="weng关" value="0" onclick="set2(id)">
                            <span class="slider"></span>
                        </label>
                    </div>
                </div>
            </div>

            <!-- 手动刷新按钮 -->
            <div class="mt-6 flex justify-center">
                <button onclick="fun()"
                    class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-md flex items-center space-x-2 refresh-btn">
                    <i class="fa fa-refresh"></i>
                    <span>手动刷新数据</span>
                </button>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4 mt-8">
        <div class="container mx-auto px-4 text-center">
            <p class="text-sm text-gray-400">© 2025 传感器监控系统 | 实时监控设备状态</p>
        </div>
    </footer>
</body>

</html>